<template>
  <div class="adjust-dialog">
    <!-- 公式设置 -->
    <el-dialog :visible.sync="dialogVisible" lock-scroll width="750px">
      <div slot="title" style="display: flex; align-items: center">
        <span>批量调{{ dialogType == 'price' ? '价' : '折扣' }}</span>
        <div style="font-size: 12px; color: #1a93fa; margin-left: 20px">当前选择{{ batchData.length }}个商品</div>
      </div>
      <div class="list">
        <el-table
          :data="tableData"
          border
          height="260px"
          tooltip-effect="dark"
          highlight-current-row
          :header-cell-style="{
            background: '#EDEDED',
            color: '#666666',
            textAlign: 'center',
            height: '30px',
            padding: '0',
          }"
          :row-style="{ textAlign: 'center', height: '30px', padding: '0' }"
          ref="table"
        >
          <el-table-column
            v-for="(item, i) in columnList"
            :key="i"
            :show-overflow-tooltip="true"
            :prop="item.props"
            :label="item.text"
            :width="item.width + 'px'"
          >
            <template slot-scope="scope">
              <div v-if="item.props == 'present'">
                <el-select v-model="scope.row[item.props]" placeholder="请选择" v-if="dialogType == 'price'">
                  <el-option v-for="op in priceOptions" :key="op.value" :label="op.label" :value="op.value">
                  </el-option>
                </el-select>
                <el-select v-model="scope.row[item.props]" placeholder="请选择" v-if="dialogType == 'discount'">
                  <el-option v-for="op in discountOptions" :key="op.value" :label="op.label" :value="op.value">
                  </el-option>
                </el-select>
              </div>
              <div v-else-if="item.props == 'operator'" style="display: flex; justify-content: center">
                <div
                  v-for="op in operatorOptions"
                  :key="op.value"
                  class="operatorItem"
                  :style="
                    op.value == scope.row[item.props]
                      ? 'background-color: #1A93FA;color: white;'
                      : 'background-color: white;color: #666666;'
                  "
                  @click="scope.row[item.props] = op.value"
                >
                  {{ op.text }}
                </div>
              </div>
              <div v-else-if="item.props == 'value'" class="input-type">
                <el-input
                  type="text"
                  v-model="scope.row[item.props]"
                  onkeyup="value=value.replace(/[^\d.]/g,'')"
                  placeholder="请输入"
                  @focus="valueInputFocus($event)"
                />
              </div>
              <span v-else>{{ scope.row[item.props] }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="dialog_bottom">
        <div style="color: #ff0000; font-size: 13px">注：本操作会应用到当前查询列表中所选择的商品</div>
        <div>
          <el-button type="primary" size="small" @click.stop="onConfirm">确定</el-button>
          <el-button size="small" @click.stop="hide">取消</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Vue from 'vue'
import { ACCESS_TOKEN, TENANT_ID, USER_INFO, ACCOUNT_BOOK } from '@/store/mutation-types'
import { getAction, postAction, putAction } from '../../api/manage'
import { handleObjectToArray, cloneObject, accAdd, accSub, accMul } from '../../utils'
export default {
  name: 'dialogFormula',
  computed: {
    ...mapGetters(['name']),
  },
  created() {},
  updated() {},
  data() {
    return {
      dialogType: 'price', //price调价格，discount调折扣
      goodsId: '',
      dialogVisible: false,
      batchData: [],
      tableData: [],
      columnList: [
        { props: 'num', text: '序号', width: '60' },
        { props: 'source', text: '价格类型', width: '120' },
        { props: '=', text: '=', width: '60' },
        { props: 'present', text: '选择价格', width: '120' },
        { props: 'operator', text: '操作', width: '200' },
        { props: 'value', text: '值', width: '100' },
      ],
      operatorOptions: [
        { text: '+', value: '1' },
        { text: '-', value: '2' },
        { text: '×', value: '3' },
        { text: '÷', value: '4' },
      ],
      priceOptions: [
        { value: 'present', label: '当前价' },
        { value: 'retailPrice', label: '零售价' },
        { value: 'presetPriceOne', label: '预设售价一' },
        { value: 'presetPriceTwo', label: '预设售价二' },
        { value: 'presetBidPrice', label: '预设进价' },
      ],
      discountOptions: [
        { value: 'present', label: '当前折扣' },
        { value: 'discountRatioOne', label: '预设折扣一' },
        { value: 'discountRatioTwo', label: '预设折扣二' },
      ],
    }
  },
  methods: {
    show(list, type) {
      this.batchData = cloneObject(list)
      this.dialogType = type
      if (type == 'price') {
        this.columnList[1].text = '价格类型'
        this.columnList[3].text = '选择价格'
        this.tableData = this.priceOptions
          .map((item, index) => {
            if (item.value != 'present') {
              return {
                num: index,
                source: item.label,
                sourceValue: item.value,
                present: 'present',
                operator: '1',
                value: 0,
              }
            }
          })
          .filter((item) => item)
      } else if (type == 'discount') {
        this.columnList[1].text = '折扣类型'
        this.columnList[3].text = '选择折扣'
        this.tableData = this.discountOptions
          .map((item, index) => {
            if (item.value != 'present') {
              return {
                num: index,
                source: item.label,
                sourceValue: item.value,
                present: 'present',
                operator: '1',
                value: 0,
              }
            }
          })
          .filter((item) => item)
      }
      this.dialogVisible = true
    },
    hide() {
      this.dialogVisible = false
    },
    valueInputFocus(e) {
      e.target.select()
    },
    onConfirm() {
      let list = []
      for (let index = 0; index < this.batchData.length; index++) {
        const element = this.batchData[index]
        let item = {
          goodsId: element.id,
        }
        for (let i = 0; i < this.tableData.length; i++) {
          const ele = this.tableData[i]

          //默认为加法，不存在未选运算符。如果默认为空需要此判断
          // if (ele.value && !ele.operator) {
          //     return this.$message.error(`请选择${ele.source}操作运算符!`)
          // }

          let p = element[ele.present] || 0
          if (ele.present == 'present') {
            p = element[ele.sourceValue] || 0 //选择的当前价就取价格类型指向的价格
          }
          let r = p
          switch (ele.operator) {
            case '1':
              r = accAdd(p, ele.value)
              break
            case '2':
              r = accSub(p, ele.value)
              break
            case '3':
              r = accMul(p, ele.value)
              break
            case '4':
              //除法，只有两个都有值并且非0时才会计算
              if (p && ele.value) {
                r = Number(p / ele.value).toFixed(4)
              }
              break
          }
          if (r < 0) {
            return this.$message.error(`${element.goodsName}的${ele.source}调整后不能小于0!`)
          } else if (r > 100 && this.dialogType == 'discount') {
            return this.$message.error(`${element.goodsName}的${ele.source}调整后不能大于100!`)
          }
          item[ele.sourceValue] = r
        }
        list.push(item)
      }
      console.log(list)
      let params = {
        goodsManyNorms: list,
      }
      postAction('/xghGoods/xghGoods/updatePriceInfoById', params).then((res) => {
        console.log(res)
        if (res.success) {
          this.$message.success(res.message)
          this.$emit('onUpdatePrice', this.goodsId)
          this.hide()
        } else {
          this.$message.error(res.message)
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
  border-bottom: #efefef 1px solid;
}
.adjust-dialog {
  ::v-deep .el-dialog {
    .el-dialog__body {
      padding: 10px 30px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }
  ::v-deep .el-table {
    width: max-content;
    .el-table__cell {
      padding: 1px 0;
      font-size: 12px;
      text-align: center;
    }
    .cell {
      padding: 0 2px;
    }
  }
  ::v-deep .el-select {
    .el-input {
      .el-input__inner {
        height: 22px;
        border: unset;
        font-size: 12px;
        border-radius: 0;
      }
      .el-input__icon {
        line-height: 22px;
      }
    }
  }

  ::v-deep .input-type .el-input {
    .el-input__inner {
      height: 22px;
      border: unset;
      padding: 0 2px;
      font-size: 12px;
      border-radius: 0;
    }
  }
}
.dialog_bottom {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .el-button {
    width: 80px;
  }
}
.operatorItem {
  background-color: white;
  //   width: 30px;
  //   height: 20px;
  margin: 2px 3px;
  padding: 0 10px;
  //   display: flex;
  //   align-items: center;
  //   justify-content: center;
  font-weight: 500;
  font-size: 16px;
  cursor: pointer;
}
</style>

